<template>
  <div>
    <v-centerForm>
      <template slot='left'>
        <el-form inline :model="searchForm" ref="searchForm" label-width="50px">
          <el-form-item label="名称"
                        prop="pName">
            <el-input placeholder="请输入名称" v-model="searchForm.pName"></el-input>
          </el-form-item>
          <el-form-item label="标识"
                        prop="pCode">
            <el-input placeholder="请输入标识" v-model="searchForm.pCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh-left" @click="_=>this.$refs.searchForm.resetFields()">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot='right'>
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="addDictionary('添加','add', null)">添加
        </el-button>
      </template>
    </v-centerForm>
    <v-tableEncapsulation row-key="id" :loading="loadingBtn.treeLoading" :columnData="columnData"
                         :tableSize="pagination.size"  :currentPage="pagination.current"
                         :tableData="treeInfo.dictionaryTreeData" :tableTotal="pagination.total"
                         @currentPage="currentPage">
      <el-table-column align="center" slot="operate"
                       label="操作" width="200">
        <template slot-scope="scope" v-if="!scope.row.init">
          <el-tooltip v-if="scope.row.pId==='0'" class="item" effect="dark" content="添加"
                      placement="top">
            <i class="el-icon-circle-plus-outline table-icon-btn color-primary"
               @click="addDictionary('添加','add', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <i class="el-icon-view table-icon-btn color-success" @click="addDictionary('查看','view', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i class="el-icon-edit-outline table-icon-btn color-primary"
               @click="addDictionary('编辑','edit', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i class="el-icon-delete table-icon-btn color-error" @click="delDictionary(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </v-tableEncapsulation>
    <el-dialog :title="dialog.title" :visible.sync="dialogVisible" @closed="closeDialog">
      <el-form :disabled="dialog.flag === 'view'" v-loading="loadingBtn.diaSubmitBtn" :model="dictionaryForm"
               ref="dictionaryForm" :label-width="formLabelWidth"
               :rules="dialog.flag === 'view' ? null : dictionaryFormRule">
        <el-form-item label="名称" prop="pName">
          <el-input v-model="dictionaryForm.pName"></el-input>
        </el-form-item>
        <el-form-item label="标识" prop="pCode">
          <el-input v-model="dictionaryForm.pCode"></el-input>
        </el-form-item>
        <el-form-item label="附属字段1" prop="other1">
          <el-input v-model="dictionaryForm.other1"></el-input>
        </el-form-item>
        <el-form-item label="附属字段2" prop="other2">
          <el-input v-model="dictionaryForm.other2"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="explanation">
          <el-input v-model="dictionaryForm.explanation"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loadingBtn.diaSubmitBtn" type="primary" @click="dictionaryFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectOne, deleteById, insert, update, queryPageList as getDictionaryList } from '@/api/system/dictionary'
import { validUppercaseLetter } from '@/common/validate/formValidate'

export default {
  name: 'dictionary',
  data () {
    return {
      searchForm: { pName: null, pCode: null },
      loadingBtn: {
        diaSubmitBtn: false,
        treeLoading: false
      },
      columnData: [
        {
          type: 'index',
          label: '序号'
        }, {
          label: '名称',
          prop: 'pName'
        }, {
          label: '标识',
          prop: 'pCode'
        }, {
          label: '额外字段1',
          prop: 'other1'
        }, {
          label: '额外字段2',
          prop: 'other2'
        }, {
          label: '备注',
          prop: 'explanation'
        }, {
          slot: 'operate',
          label: '操作'
        }
      ],
      treeInfo: {
        dictionaryTreeData: []
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        params: {}
      },
      dialog: {
        title: '',
        flag: ''
      },
      dialogVisible: false,
      dictionaryForm: {
        pId: '0',
        id: null,
        pCode: null,
        pName: null,
        other1: null,
        other2: null,
        explanation: null
      },
      dictionaryFormRule: {
        pCode: [
          { required: true, message: '请填写标识', trigger: 'blur' },
          { validator: validUppercaseLetter, trigger: 'blur' }
        ],
        pName: [
          { required: true, message: '请选择名称', trigger: 'blur' }
        ]
      },
      // 表单标签宽度
      formLabelWidth: '100px'
    }
  },
  methods: {
    search () {
      this.pagination.pName = this.searchForm.pName
      this.pagination.pCode = this.searchForm.pCode
      this.pagination.current = 1
      this.getDictionaryList()
    },
    /**
     * 切换页码
     * @param value
     */
    currentPage (value) {
      this.pagination.current = value
      this.getDictionaryList()
    },
    /**
     * 删除单条操作
     */
    delDictionaryAction (row) {
      deleteById(row.id).then(({ code, msg }) => {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          this.getDictionaryList()
        }
      })
    },
    delDictionary (row) {
      this.$confirm('是否确认删除?', '确认删除').then(_ => {
        this.delDictionaryAction(row)
      }).catch(_ => {
      })
    },
    addDictionary (title, flag, data) {
      this.dialog.title = title
      this.dialog.flag = flag
      this.dialogVisible = true
      if (flag === 'edit' || flag === 'view') {
        selectOne(data.id).then(({ data: res }) => {
          this.dictionaryForm = res
        })
      } else {
        this.dictionaryForm.pId = data ? data.id : 0
      }
      this.$nextTick(() => {
        this.$refs.dictionaryForm.clearValidate()
      })
    },
    dictionaryFormSubmit () {
      if (this.dialog.flag === 'view') {
        this.dialogVisible = false
        return
      }
      this.$refs.dictionaryForm.validate((valid) => {
        if (valid) {
          this.loadingBtn.diaSubmitBtn = true
          const params = this.dictionaryForm
          if (this.dialog.flag === 'edit') {
            update(params).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
                this.dialogVisible = false
                this.getDictionaryList()
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          } else {
            insert(params).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
                this.getDictionaryList()
                this.dialogVisible = false
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          }
        } else {
          return false
        }
      })
    },
    /**
     * 关闭分配角色弹窗
     */
    closeDialog () {
      this.dictionaryForm = {
        pId: '0',
        id: null,
        pCode: null,
        pName: null,
        other1: null,
        other2: null,
        explanation: null
      }
      this.loadingBtn.diaSubmitBtn = false
      this.dialog.flag = ''
      this.dialog.title = ''
      this.$nextTick(() => {
        this.$refs.dictionaryForm.clearValidate()
      })
    },
    async getDictionaryList () {
      this.loadingBtn.treeLoading = true
      const { data, code } = await getDictionaryList(this.pagination)
      if (code === this.$constant.SUCCESS) {
        this.treeInfo.dictionaryTreeData = data.records
        this.pagination.total = data.total
      }
      this.loadingBtn.treeLoading = false
    }
  },
  created () {
    this.getDictionaryList()
  }
}
</script>

<style scoped>
.custom-tree-node {
  width: 100%;
  position: relative;
}

.operate-btns {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
